Chart for WPF/Silverlight
プログラムによるデータテーブルへのバインド
チュートリアル > データバインディングのチュートリアル > プログラムによるデータテーブルへのバインド

このチュートリアルでは、C1Chart をプログラムでデータセットにバインドするための手順を説明します。データは、製品の名前を表す１本の y 軸と、各製品の単価を表す１本の x 軸を持つ単純な横棒グラフとして情報を表示します。最も高価な 10 種類の製品が降順で表示されます。横棒グラフでは、１つの系列を使用して単価を表示します。系列が１つしかないため、凡例は使用しません。

このグラフは、サンプルの Access データベース Nwind.mdb のデータを使用します。このクイックスタートでは、データベースファイル Nwind.mdb が C:\Users\<ユーザー名>\Documents\ComponentOne Samples\Common ディレクトリに置かれているものとし、このデータベースに言及する際は、簡潔にするため、フルパスではなくファイル名を使用します。

このチュートリアルを完了すると、グラフの表示は次のようになります。

C1Chart をプログラムでデータテーブルにバインドするには、以下の手順を実行します。

  1. Visual Studio で新しい WPF プロジェクトを作成します。

  2. C1.WPF.C1Chart の参照をプロジェクトに追加します。

  3. C1Chart コントロールをウィンドウに追加します。

  4. C1Chart コントロールがウィンドウに配置されたら、次の XAML コードを追加します。

    XAML
    コードのコピー 
    Title="Window1" Height="300" Width="500" xmlns:c1chart="clr-namespace:C1.WPF.C1Chart;assembly=C1.WPF.C1Chart" Loaded="Window_Loaded">
    <Grid>
        <c1chart:C1Chart Content="" Margin="10,10,10,18" Name="c1Chart1">
            <c1chart:C1Chart.Data>
                <c1chart:ChartData>
                    <c1chart:ChartData.ItemNames>P1 P2 P3 P4 P5</c1chart:ChartData.ItemNames>
                    <c1chart:DataSeries Label="系列１" Values="20 22 19 24 25" />
                    <c1chart:DataSeries Label="系列２" Values="8 12 10 12 15" />
                </c1chart:ChartData>
            </c1chart:C1Chart.Data>
            <c1chart:Legend DockPanel.Dock="Right" />
        </c1chart:C1Chart>
    </Grid>

  5. 「XAML」タブを選択して、次の名前空間を XAML コードに追加します。

    XAML
    コードのコピー 
    xmlns:sys="clr-namespace:System;assembly=mscorlib"

  6. XAML コードで、タイトルの Width を「300」から「500」に変更します。

  7. <c1chart:C1Chart> タグ内で、Margin を０に変更して、ChartType を Bar に設定します。これによって、デフォルトのグラフの外観が縦棒から横棒に変わります。XAML コードは次のようになるはずです。
    XAML
    コードのコピー 
    <c1chart:C1Chart Margin="0" Name="c1Chart1" ChartType="Bar">
</c1chart:C1Chart>

    グラフは次のように表示されます。

  8. c1chart:C1Chart の終了タグの後でラベルを作成して、そのテキストを「最も高価な 10 製品」とします。

    XAML
    コードのコピー 
    <TextBlock DockPanel.Dock="Top" Text="最も高価な 10 製品" HorizontalAlignment="Center"/>

    これで、XAML コードは次のようになるはずです。

    XAML
    コードのコピー 
    <Grid>
        <c1chart:C1Chart Margin="0" Name="c1Chart1" ChartType="Bar" Height="185" VerticalAlignment="Top">
            <c1chart:C1Chart.Data>
                <c1chart:ChartData>
                    <c1chart:DataSeries Label="系列１" Values="20 22 19 24 25" />
                    <c1chart:DataSeries Label="系列２" Values="8 12 10 12 15" />
                </c1chart:ChartData>
            </c1chart:C1Chart.Data>
            <c1chart:Legend DockPanel.Dock="Right" />
        </c1chart:C1Chart>
        <TextBlock DockPanel.Dock="Top" Text="最も高価な 10 製品" HorizontalAlignment="Center"/>
    </Grid>>

  9. 次の using 指示文または imports 指示文を、コードビハインドファイルに追加します。

    コードのコピー 
    Imports System.Data
Imports System.Data.OleDb
Imports C1.WPF.C1Chart
    コードのコピー 
    using System.Data;
using System.Data.OleDb;
using C1.WPF.C1Chart;

  10. データセットの変数を Window_Loaded プロシージャの外部で宣言して、製品と単価をデータベースから取得するために次のコードを追加します。

    コードのコピー 
    Private _dataSet As DataSet

Private Sub Window_Loaded(ByVal sender As Object, ByVal e As RoutedEventArgs)

   ' コレクションを作成して、データセットに入力

    Dim mdbFile As String = "C:\Users\<ユーザー名>\Documents\ComponentOne Samples\Common\Nwind.mdb"

    Dim connString As String = String.Format("Provider=Microsoft.Jet.OLEDB.4.0; Data Source={0}", mdbFile)

    Dim conn As New OleDbConnection(connString)

    Dim adapter As New OleDbDataAdapter("SELECT TOP 10 ProductName, UnitPrice" & Chr(13) & "" & Chr(10) & " FROM Products ORDER BY UnitPrice DESC;", conn)

    _dataSet = New DataSet()

    adapter.Fill(_dataSet, "Products")

   ' グラフのデータのソースを設定

   c1Chart1.Data.ItemsSource = _dataSet.Tables("Products").Rows

End Sub
    コードのコピー 
    DataSet _dataSet;

   private void Window_Loaded(object sender, RoutedEventArgs e)

    {

     // コレクションを作成して、データセットに入力

      string mdbFile = @"C:\Users\<ユーザー名>\Documents\ComponentOne Samples\Common\Nwind.mdb";

      string connString = string.Format("Provider=Microsoft.Jet.OLEDB.4.0; Data Source={0}", mdbFile);

      OleDbConnection conn = new OleDbConnection(connString);

    OleDbDataAdapter adapter =

    new OleDbDataAdapter(@"SELECT TOP 10 ProductName, UnitPrice

    FROM Products ORDER BY UnitPrice DESC;", conn); 

     _dataSet = new DataSet();

      adapter.Fill(_dataSet, "Products");

      // グラフのデータのソースを設定

      c1Chart1.Data.ItemsSource = _dataSet.Tables["Products"].Rows;

     }
    注意： mdbFile のファイルパスは、Nwind.mdb データベースプロジェクトが置かれているマシン上の位置と一致するようにしてください。
  11. 「XAML」タブをクリックして XAML ビューを表示し、次のデフォルトデータを ChartData から削除します。
    XAML
    コードのコピー 
    <c1chart:ChartData.ItemNames>P1 P2 P3 P4 P5</c1chart:ChartData.ItemNames>
                    <c1chart:DataSeries Label="系列１" Values="20 22 19 24 25" />
                    <c1chart:DataSeries Label="系列２" Values="8 12 10 12 15" />

    これで、ウィンドウ上のC1Chart コントロールの表示は空になります。

  12. <c1chart:C1Chart.Data> タグ内で、ItemNameBindingプロパティを ChartData に追加して要素（この場合は y 軸のラベル）の名前を指定し、ValueBindingプロパティを DataSeries に追加して系列の数値を指定します。

    XAML
    コードのコピー 
    <c1chart:ChartData ItemNameBinding="{Binding Path=[ProductName]}">
                    <c1chart:DataSeries ValueBinding="{Binding Path=[UnitPrice]}"/>
                </c1chart:ChartData>

    プロジェクトの XAML コードは、次のようになるはずです。

    XAML
    コードのコピー 
    <Window x:Class="Chart for WPF_QuickStart.Window1"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:sys="clr-namespace:System;assembly=mscorlib"
       
    Title="Window1" Height="300" Width="500" Loaded="Window_Loaded" xmlns:c1chart="clr-namespace:C1.WPF.C1Chart;assembly=C1.WPF.C1Chart">
    <Grid>
        <c1chart:C1Chart Margin="0" Name="c1Chart1" ChartType="Bar">
            <TextBlock DockPanel.Dock="Top" Text="最も高価な 10 製品"
                 HorizontalAlignment="Center"/>
            <c1chart:C1Chart.Data>
                <c1chart:ChartData ItemNameBinding="{Binding Path=[ProductName]}">
                    <c1chart:DataSeries ValueBinding="{Binding Path=[UnitPrice]}"/>
                </c1chart:ChartData>
            </c1chart:C1Chart.Data>
        </c1chart:C1Chart>
    </Grid>
</Window>

  13. <c1chart:Legend DockPanel.Dock="Right" /> タグを XAML から削除して、組み込みの Legend コントロールを削除します。

  14. プロジェクトを実行して、すべてが正しく機能していることを確認します。

実行時に次のことを確認してください。

グラフに Products テーブルのデータが表示されます。

関連トピック
XML へのバインド

 

 

Copyright © GrapeCity, Inc. All rights reserved.